<template>
	<div>
		<el-button type="primary" @click="dialogFormVisible = true">选择通知人</el-button>
		<el-dialog title="搜索用户" :visible.sync="dialogFormVisible"  width="850px" @close="close">
			<el-form :model="form">
				<el-row :gutter="20">
					<el-col :span="20">
						<el-input v-model="form.title" auto-complete="off"></el-input>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" plain @click="searchUsers">搜索</el-button>
					</el-col>
				</el-row>
			</el-form>
			<div class="data_box">
				<el-row :gutter="20" v-for="(user,index) in users" :key="index">
				  	<el-col :span="2"><el-avatar shape="square" size="medium" :src="user.avatar"></el-avatar></el-col>
				  	<el-col :span="6">{{user.nickname}}</el-col>
					<el-col :span="6">{{user.create_time}}</el-col>
				  	<el-col :span="6">{{user.mobile}}</el-col>
				  	<el-col :span="4"><el-button type="primary" size="mini" @click="handleIncrease(user)">选择</el-button></el-col>
				</el-row>
<!--				<el-row :gutter="20">-->
<!--				  <el-col :span="2"><el-avatar shape="square"size="medium" src="squareUrl"></el-avatar></el-col>-->
<!--				  <el-col :span="6">幸福香小菜</el-col>-->
<!--				  <el-col :span="6">李歆芮</el-col>-->
<!--				  <el-col :span="6">13600916587</el-col>-->
<!--				  <el-col :span="4"><el-button type="primary" size="mini"  @click="handleIncrease">选择</el-button></el-col>-->
<!--				</el-row>-->

			</div>
			
			<div slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button @click="dialogFormVisible = false">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getMemberList } from '../api/memberManagementAPI'
	export default {
		name: "searchUsers",
		data() {
			return {
				dialogFormVisible: false,
				form: {
					title: '' // 搜索的值
				},
				users: [], // 用户数据列表
				arr: [] // 选择时候的数据
			}
		},
		methods: {
			// 模态框关闭的时候
			close() {
				this.arr = []
			},
			handleIncrease(data) {
				console.log(data)
				this.arr.push(data)
				// 数组去重
				let newArr = []
				for (let i = 0; i < this.arr.length; i++) {
					let flag = true
					for (let j = 0; j < newArr.length; j++) {
						if (this.arr[i].id === newArr[j].id) {
							flag = false
						}
					}
					if (flag) {
						newArr.push(this.arr[i])
					}
				}
				console.log(newArr)
				console.log([ ...new Set([this.arr])])
				this.$emit('increase', newArr);
			},
			// 搜索用户列表
			searchUsers() {
				let params = {
					p: '',
					length: '',
					keyword: this.form.title
				};
				getMemberList(params).then(res => {
					console.log(res.data.member,'会员列表')
					this.users = res.data.member
				})
			}
		}
	}
</script>

<style scoped>
	/*@import '~scss_vars';*/
	.data_box{
		margin: 10px;
		max-height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>
